* {
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
}

.visible {
  display: inline-block;
}

.movable {
  opacity: 0.5;
}

.movable:hover {
  left: 0px;
  opacity: 1;
  transition: ease-out 0.5s;
}

.hide {
  left: -130px;
}

.imageList-container {
  background-color: darkslategray;
  /* border: hotpink 1px solid; */
  /* border-right: 5px #000000 solid; */
  width: 130px;
  height: 100vh;
  box-sizing: border-box;
  display: inline-block;
  /* float: left; */
  position: fixed;
  z-index: 10;
  transition: ease-out 1s;
  box-shadow: 0px 0px 20px #000;
}

#pullback {
  width: 24px;
  height: 24px;
  padding: 3px 6px 3px 0px;
  background-color: transparent;
  border-radius: 0px 12px 12px 0px;
  left: 130px;
  position: relative;
  z-index: -1;
  box-shadow: 0px 0px 20px #000;
  transition: 1s;
}

#pullback:hover:first-child {
  background-color: darkslategray;
}

.imageList {
  margin: 0px 5px 0px 5px;
  border: 2px #000035 solid;
  border-radius: 5px;
}

.imageList>ul {
  list-style: none;
}

.imageList>ul>li {
  height: 30px;
  border-bottom: 2px #000035 solid;
  line-height: 30px;
  padding-left: 5px;
  position: relative;
}

.imageList>ul>li:last-child {
  border: 0px;
}

.imageList>ul>li:hover {
  background-color: #000;
  color: #fff;
}

.imageList>ul>li>i {
  display: inline-block;
  width: 32px;
  height: 24px;
  margin-top: 2px;
  border: #fff 1px solid;
  border-radius: 5px;
  background: url("https://wallpaperm.cmcm.com/d0642723426873998239a09d010435ca.jpg") no-repeat center center;
  background-size: 100% 100%;
}

.imageList>ul>li:nth-child(2)>i {
  background-image: url('https://wallpaperm.cmcm.com/2d64f9b1d09b9c519b301d4d721adc0c.jpg');
}

.imageList>ul>li:nth-child(3)>i {
  background-image: url('https://wallpaperm.cmcm.com/live/preview_img_raw/1e1d7352f1c97f19af76a3fe5766ac08_preview_raw.jpg');
}

.imageList>ul>li:nth-child(4)>i {
  background-image: url('https://wallpaperm.cmcm.com/live/preview_img_raw/e1150dfe0cb7ff8cd08647d1936627f3_preview_raw.jpg');
}

.imageList>ul>li:nth-child(5)>i {
  background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/2cd0e8ee8b120d5b579878915ac99222.mp4.jpg');
}

.imageList>ul>li:nth-child(6)>i {
  background-image: url("https://wallpaperm.cmcm.com/2d6a574669e918214836371511fea5b8.jpg");
}

.imageList>ul>li:nth-child(7)>i {
  background-image: url('https://wallpaperm.cmcm.com/736258ccfeacf3050afb9609478d4bdc.jpg');
}

.imageList>ul>li:nth-child(8)>i {
  background-image: url('https://wallpaperm.cmcm.com/c8ffebd0dcf7b1b80a0ea46ba07ce43f.jpg');
}

.imageList>ul>li>p {
  width: 55%;
  height: 30px;
  display: inline-block;
  position: absolute;
  margin-left: 5px;
  margin-bottom: 3px;
  overflow: hidden;
  user-select: none;
  font-size: 12px;
  font-weight: 800;
}

.imageList>ul>li>textarea {
  width: 60%;
  margin-bottom: 6px;
  margin-left: -3px;
  font-size: 10px;
  border-radius: 5px;
  border: 0px;
  outline: none;
  background-color: #ffffff33;
  color: #fff;
  padding-left: 5px;
  resize: none;
  overflow: hidden;
  display: none;
}

.imageOperation {
  position: relative;
  margin: 10px 5px 0px 5px;
  padding: 10px 0px 10px 0px;
  text-align: center;
  border-radius: 5px;
}

.imageOperation button {
  width: 100%;
  height: 40px;
  /* line-height: 40px; */
  margin: 10px auto;
  position: relative;
  background-color: black;
  border: 2px #ffffff90 solid;
  border-radius: 5px;
  box-sizing: border-box;
  color: #ffffff90;
  font-family: sans-serif;
  font-size: 18px;
  cursor: pointer;
}

#uploadField{
  position:relative;
  width: 100%;
  height: 135px;
  display: none;
  color:#fff;
  background-color: black;
  border: 2px #ffffff90 solid;
  overflow:hidden;
  box-sizing:border-box;
}

#uploadField input{
  cursor: pointer;
}

#chooseFile{
  width:100%;
  height: 40px;
  line-height: 40px;
  position: relative;
  cursor: pointer;
  color: #888;
  background: #000;
  border: 2px #ffffff90 solid;
  box-sizing:border-box;
  overflow: hidden;
  display: inline-block;
  font-size:18px;
  border-radius: 5px;
}

#chooseFile input{
  position:absolute;
  opacity:0
}

#uploadFile{
  width:100%;
  height: 40px;
  line-height: 40px;
  position: relative;
  cursor: pointer;
  color: #888;
  background: #000;
  border: 2px #ffffff90 solid;
  box-sizing:border-box;
  overflow: hidden;
  display: inline-block;
  font-size:18px;
  border-radius: 5px;
}

.userOperation{
  position: relative;
  margin: 10px 5px 0px 5px;
  padding: 10px 0px 10px 0px;
  text-align: center;
  border-radius: 5px;
}

.userOperation button {
  width: 100%;
  height: 40px;
  /* line-height: 40px; */
  margin: 10px auto;
  position: relative;
  background-color: black;
  border: 2px #ffffff90 solid;
  border-radius: 5px;
  box-sizing: border-box;
  color: #ffffff90;
  font-family: sans-serif;
  font-size: 18px;
}

#login{
  background-color: #84B841;
  /*display: none;*/
}

#loginOut{
  background-color: #990000;
  display: none;
}

.imageOperation button:hover {
  color: #fff;
  border: 2px #fff solid;
}

.main-container {
  /* width: calc(100% - 130px); */
  width: 100%;
  height: 100vh;
  background-color: #555;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: 0px;
  overflow: auto;
  padding-bottom: 100px;
}

.draggable {
  width: 200px;
  height: 200px;
  background-color: aqua;
  position: relative;
  display: inline-block;
  transition: ease-in 0.2s;
}


/* .draggable:hover {
  background-color: grey;
} */

.droppableImage {
  /* width: 900px; */
  /* height: 800px; */
  width: 100%;
  height: 100%;
  /* border: aqua 3px dashed; */
  position: relative;
  margin: auto auto;
  display: inline-block;
  box-sizing: border-box;
  /* text-align: center; */
  background: no-repeat center center;
  background-size: cover;
}

.droppableImage::before {
  content: "\260E请拖拽至此处";
  position: absolute;
  left: 50%;
  top: 50%;
  color: aliceblue;
  font-size: 25px;
  /* line-height: 800px; */
  /* margin-left: -80px; */
  display: inline-block;
}

.dropover {
  border: orange 3px dashed;
}

.dropped {
  border: 0;
}


/* .dropped::before会在.dropped样式添加的同时添加，它改变的是::before的样式
而::before不会因class名不同而新建一个伪元素，仍然指向前一个。 */

.dropped::before {
  z-index: -1;
}